<template>
  <div>
    <!-- 基本信息 -->
    <div class="listDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-form-item label="省份名称">
          <el-input placeholder="请输入省份名称" v-model="form.name" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 关联省份 -->
    <div class="mb_20" v-if="is_update">
      关联城市：
      <el-button type="primary" @click="regionList">选择</el-button>
    </div>
    <div class="listDiv">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50" align="center" />
        <el-table-column label="城市名称" prop="area_name" align="center" />
        <el-table-column label="创建时间" prop="created_at" align="center">
          <template slot-scope="scope">{{scope.row.created_at}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleDelete(scope.row)"
              v-if="is_update"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="allCenter">
      <el-button type="primary" @click="NextSubmit" :disabled="savedisabled">保存</el-button>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="关联城市" :visible.sync="dialogFormVisible" width="60%" @close="close" center>
      <el-form ref="form2" :model="form2" :inline="true" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="城市名称">
              <el-input v-model="form2.name" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查找</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="listDiv">
        <el-table
          ref="tableData1"
          :data="tableData1"
          style="width: 100%"
          :row-key="getRowKeys"
          height="250"
          @selection-change="handleSelectionChange"
          v-if="LoadingTable"
        >
          <!-- <el-table-column fixed label="单选" type="index" width="50" align="center">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">{{scope.row.index}}</el-radio>
              </template>
          </el-table-column>-->
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="selectable"
            :reserve-selection="true"
          ></el-table-column>
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="area_name" label="城市名称" align="center" />
          <el-table-column prop="created_at" label="创建时间" align="center">
            <template slot-scope="scope">{{scope.row.created_at}}</template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
        </el-table>
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form2.page"
              :page-sizes="page_sizes"
              :page-size="form2.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <div class="allCenter">
          <el-button type="primary" class="submitBtn" @click="submitFn()">确认选择</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { region_show, region_select, region_save } from "@/api/NewRetailSystem";
export default {
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    },
    activeId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  filters: {
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date((e - 0) * 1000).format("yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    }
  },
  data() {
    return {
      radio: "",
      tableData: [], //列表
      deletData:[], 
      tableData3: [], //医院列表
      form: {
        level: 2,
        relation_ids: [],
        opt: null,
        id: this.$route.query.id,
        name: this.$route.query.area_name,
        page: 1,
        size: 10
      },
      form2: { name: null },
      dialogFormVisible: false, //弹窗
      LoadingTable: true,
      only: "", //页面提交成功返回唯一的字段
      savedisabled: false, //提交按钮禁用
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      tableData1: [{}], //弹窗配置
      multipleSelection: [], //勾选数组
      fileList: [],
      is_update: true
    };
  },
  mounted() {
    this.id = this.$route.query.id - 0;
    if (this.$route.query.type==1) {
      this.$route.meta.title = "编辑省份";
      this.getList();
    } else {
      this.$route.meta.title = "添加省份";
    }

    // this.regionList();
  },
  watch: {
    // "form.relation_ids"(val) {
    //   console.log(val);
    //   this.savedisabled = val.length ? false : true;
    // }
  },
  methods: {
    // 主页列表
    async getList() {
      await region_show({ id: this.$route.query.id - 0 }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableData = res.data.data.detail;
          let arr = [];
          this.tableData.forEach(item => {
            arr.push(item.id);
          });
          this.form.relation_ids = arr;
        }
      });
    },
    //关联城市弹窗列表
    async regionList() {
      this.LoadingTable = false;
      await region_select({ type: 2 }).then(res => {
        if (res.data.code == 200) {
          res.data.data.map(res => {
            console.log(1111,res, this.deletData)
            for (let i = 0; i < this.deletData.length; i++) {
                 console.log(2222,res,this.deletData[i].id)
              if (this.deletData[i].id == res.id) {
                console.log(res,'dele')
                res.has_related = 0;
              }
            }

            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].id == res.id) {
                res.has_related = 1;
              }
            }
          });
          console.log("详情res", res);
          this.tableData1 = res.data.data ? res.data.data : [];
          this.page_totals = res.data.meta.total;
          this.LoadingTable = true;
          this.multipleSelection = [];
          this.dialogFormVisible = true;

        }
      });
    },
    // 复选框禁用控制
    selectable(row, index) {
      if (row.has_related) {
        return false;
      } else {
        return true;
      }
    },
    //保存
    async NextSubmit() {
      // if (
      //   (this.$route.query.type && this.tableData.length < 1) ||
      //   (!this.$route.query.type && this.form.relation_ids.length < 1)
      // ) {
      //   this.$message({
      //     message: "请先关联省份/城市！！！",
      //     type: "warning"
      //   });
      //   return;
      // }

      let dates = { ...this.form };
      delete dates.page;
      delete dates.size;
      // console.log(this.form.relation_ids)
      if (this.$route.query.type) {
        dates.opt = 2;
      } else {
        dates.opt = 1;
      }
      dates.relation_ids = JSON.stringify(this.form.relation_ids);
      let res = await region_save(dates);
      if (res.data.code == 200) {
        this.$router.push({ path: "/ProvinceManagement" });
      }
    },
    // 配置弹窗
    // handlePrize() {
    // this.dialogFormVisible = true;
    // },
    // 弹窗确认
    submitFn() {
      this.dialogFormVisible = false;
      this.tableData = [...this.tableData,...this.multipleSelection];
    },
    // 勾选行的id
    getRowKeys(row) {
      return row.id;
    },
    // 勾选的数组
    handleSelectionChange(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        arr.push(item.id);
      });
      this.form.relation_ids = [...this.form.relation_ids,...arr];
    },
    // 删除
    handleDelete(i) {
      let arr = [];
      this.tableData.splice(this.tableData.indexOf(i), 1);
      if (this.deletData.length) {
        this.deletData.map(res => {
          if (res.id != i.id) {
            this.deletData.push(i);
          }
        });
      } else {
        this.deletData.push(i);
      }
      this.tableData.forEach(item => {
        arr.push(item.id);
      });
      this.form.relation_ids = [...arr];

    },
    // 弹窗名称查询
    handleSearch() {
      this.form2.page = 1;
      this.regionList(this.form2);
    },
    // 弹窗关闭清空勾选
    close() {
      this.dialogFormVisible = false;
      this.form2 = {
        name: ""
      };
    },

    // 改变页面条数-弹窗
    handleSizeChange(val) {
      console.log("条数", this.form2);

      this.form2.pagesize = val;
      this.regionList(this.form2);
    },
    // 选择页数-弹窗
    handleCurrentChange(val) {
      console.log("页数", this.form2);
      this.form2.page = val;
      this.regionList(this.form2);
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.listDiv {
  padding: 20px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mb_20 {
  margin: 20px;
}
.mt_20 {
  margin-top: 20px;
}
.allCenter {
  text-align: center;
  margin: 20px;
}
</style>